import React from "react";
import styles from './index.module.scss';
import classnames from 'classnames';
import {IconFont} from '@/components';
import {EnumChartActions} from "@/pages/dv/constants/EnumHeaderToolbar";

/**
 * 操作chart时的互动图标组件
 * @constructor
 */
export default function ChartActions() {

  /**
   * 撤销
   */
  const handleBackout = () => {
    console.log('handleBackout');
  }

  /**
   * 重做
   */
  function handleRewrite() {
    console.log('handleRewrite');
  }

  /**
   * 复制图表
   */
  function handleCopy() {
    console.log('handleCopy');
  }

  const actions = {
    handleBackout,
    handleRewrite,
    handleCopy,
  }

  return <ul className={classnames(styles.toolbarUl, styles.chartActions)}>
    {
      Object.entries(EnumChartActions).map(([key, value]) => <li
        key={key}
        // title={value.label}
        onClick={actions[value.onClick]}
        className={classnames({
          [styles.active]: value.disabled
        })}
      >
        <IconFont type={value.icon}/>
        <span>{value.label}</span>
      </li>)
    }
  </ul>
}
